/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useMemo, useCallback } from "react";
import { Chart, Geom, Axis, Tooltip } from "bizcharts";
import { Spin, Row, Col } from "antd";
import styles from "./style.less";

const in_num_cols = {
  num: {
    type: "linear",
    min: 0,
  },
};

const out_rate_cols = {
  num: {
    type: "linear",
    min: 0,
    formatter: value => `${value}%`,
  },
};

const listTypeMap = {
  inNumRank: "inNumDetailList",
  outRateRank: "outRateDetailList",
}

const Histogram = ({ loading = false, title, list = [], rankType, redirect }) => {
  const cols = useMemo(
    () => {
      switch (rankType) {
        case "inNumRank":
        case "orderNumRank":
        case "fansNumRank":
          return in_num_cols;
        case "outRateRank":
          return out_rate_cols;
        default:
          break;
      }
    },
    [rankType]
  );

  const gemoName = useMemo(
    () => {
      switch (rankType) {
        case "inNumRank":
          return "入库数";
        case "outRateRank":
          return "出库率";
        case "orderNumRank":
          return "寄件订单数";
        case "fansNumRank":
          return "公众号粉丝数";
        default:
          break;
      }
    },
    [rankType]
  );

  const onMoreClick = useCallback(
    () => {
      redirect && redirect("areaRanking", listTypeMap[rankType])
    },
    [redirect, rankType],
  )

  return (
    <Spin spinning={loading}>
      {title && (
        <Row type="flex" style={{ width: "100%" }} align="middle">
          <Col style={{ flex: 1 }} className={styles.title}>
            <div>{title}</div>
          </Col>
          {redirect && (
            <Col>
              <a onClick={onMoreClick}>更多&gt;</a>
            </Col>
          )}
        </Row>
      )}
      {list.length !== 0 ? (
        <Chart height={400} data={list} scale={cols} forceFit color="num">
          <Axis name="abbr_name" />
          <Axis name="num" />
          <Tooltip
            crosshairs={{
              type: "y",
            }}
          />
          <Geom
            color={rankType == "inNumRank" ? "#ED7D31" : ""}
            type="interval"
            position="abbr_name*num"
            tooltip={[
              `abbr_name*num`,
              (name, num) => {
                return {
                  title: `${name}`,
                  name: gemoName,
                  value: rankType === "outRateRank" ? `${num}%` : num,
                };
              },
            ]}
          />
        </Chart>
      ) : (
        <div className={styles.example}>暂无数据</div>
      )}
    </Spin>
  );
};

export default React.memo(Histogram);
